<template>
  <div style=";height: 800px">
    <el-row>
      <el-col :span="4"><div class="grid-content bg-purple">
        <el-tree
          :data="menus"
          :props="defaultProps"
          :expand-on-click-node="false"
          node-key="id"
          @node-click="getMenuCar"
          :draggable="true"
          @node-contextmenu="contextmenu"
          ref="menuTree"
          style="width: 250px"
        >
        </el-tree>
      </div></el-col>
      <el-col :span="20"><div class="grid-content bg-purple-light">
        <el-form :inline="true" :model="dataForm" @keyup.enter.native="getCartypeList()">
          <el-form-item>
            <el-input v-model="dataForm.root" placeholder="请输入内容" clearable></el-input>
          </el-form-item>
          <el-form-item>
            <el-button @click="getCartypeList()">查询</el-button>
            <el-button v-if="isAuth('sys:carmanage:insert')" type="primary" @click="addOrUpdateHandle()">新增</el-button>
          </el-form-item>
        </el-form>
        <el-table
          :data="dataList"
          border
          v-loading="dataListLoading"
        >
          <el-table-column
            prop="id"
            header-align="center"
            align="center"
            width="90"
            label="ID">
          </el-table-column>
          <el-table-column
            prop="carName"
            header-align="center"
            align="center"
            width="90"
            label="车辆名称">
          </el-table-column>
          <el-table-column
            prop="carCode"
            header-align="center"
            align="center"
            width="90"
            label="车牌号">
          </el-table-column>
          <el-table-column
            prop="drivingKMs"
            header-align="center"
            align="center"
            width="90"
            label="驾驶公里">
          </el-table-column>
          <el-table-column
            prop="price"
            header-align="center"
            align="center"
            width="90"
            label="元/小时">
          </el-table-column>
          <el-table-column
            prop="engineNumber"
            header-align="center"
            align="center"
            width="90"
            label="发动机编号">
          </el-table-column>
          <el-table-column
            prop="productionLife"
            header-align="center"
            align="center"
            width="90"
            label="生产日期">
          </el-table-column>
          <el-table-column label="使用状态"  align="center" width="90">
            <template slot-scope="scope">
              {{ scope.row.carStatus   === 'y' ? "可使用" : "不可使用" }}
            </template>
          </el-table-column>
          <el-table-column
            prop="carType"
            header-align="center"
            align="center"
            width="90"
            label="车辆类型">
          </el-table-column>
          <el-table-column
            prop="createTime"
            header-align="center"
            align="center"
            width="100"
            label="创建时间">
          </el-table-column>
          <el-table-column
            prop="updateTime"
            header-align="center"
            align="center"
            width="100"
            label="修改时间">
          </el-table-column>
          <el-table-column
            prop="imgId"
            align="center"
            width="130"
            label="图片">
            <template slot-scope="scope">
              <img style="width: 130px; height: 80px;margin-left: -10px;"  :src="require('@/assets/img/'+scope.row.imgId)"/>
            </template>
          </el-table-column>
          <el-table-column
            fixed="right"
            header-align="center"
            align="center"
            width="150"
            label="操作">
            <template slot-scope="scope">
              <el-button v-if="isAuth('sys:carmanage:update')" type="text" size="small" @click="addOrUpdateHandle(scope.row.id)">修改</el-button>
              <el-button v-if="isAuth('sys:carmanage:delete')" type="text" size="small" @click="deleteHandle(scope.row)">删除</el-button>
            </template>
          </el-table-column>
        </el-table>
        <el-pagination
          @size-change="sizeChangeHandle"
          @current-change="currentChangeHandle"
          :current-page="pageIndex"
          :page-sizes="[5,8,11,14]"
          :page-size="pageSize"
          :total="totalPage"
          layout="total, sizes, prev, pager, next, jumper">
        </el-pagination>
        <!-- 弹窗, 新增 / 修改 -->
        <add-or-update v-if="addOrUpdateVisible" ref="addOrUpdate" @refreshDataList="getCartypeList"></add-or-update>
      </div></el-col>
    </el-row>
    <el-dialog
        :title="title"
        :visible.sync="dialogVisible"
        width="30%"
        :close-on-click-modal="false"
      >
        <el-form :model="category">
          <el-form-item label="分类名称">
            <el-input v-model="category.carType" autocomplete="off"></el-input>
          </el-form-item>
          <el-form-item label="备注">
            <el-input v-model="category.back" autocomplete="off"></el-input>
          </el-form-item>
        </el-form>
        <span slot="footer" class="dialog-footer">
        <el-button @click="dialogVisible = false">取 消</el-button>
        <el-button type="primary" @click="submitData">确 定</el-button>
      </span>
      </el-dialog>
    <el-dialog
      :visible.sync="menuOpen"
      width="30%"
      :close-on-click-modal="false"
    >
      <span v-if="data!=null">
          <el-button
            style="font-size: 25px;margin-left: 30px"
            type="text"
            size="max"
            @click="() => append()"
          >Append</el-button>
          <el-button
            style="font-size: 25px;margin-left: 30px"
            type="text"
            size="max"
            @click="() => remove()"
          >Delete</el-button>
        <el-button
          style="font-size: 25px;margin-left: 30px"
          type="text"
          size="max"
          @click="() => update()"
        >Update</el-button>
        </span>
    </el-dialog>
  </div>
</template>

<script>
  import AddOrUpdate from './cartype-add-or-update'
  export default {
    //import引入的组件需要注入到对象中才能使用
    components: {AddOrUpdate},
    props: {},
    data() {
      return {
        data:'',
        node:'',
        menuOpen:false,
        draggable: false,
        title: "",
        dialogType: "", //edit,add
        category: {
          carType: "",
          parentId:"",
          back:"",
          id:''
        },
        dialogVisible: false,
        menus: [],
        defaultProps: {
          children: "children",
          label: "carType"
        },
        dataForm:{
          root:'',
          test:''
        },
        dataList:[],
        dataListLoading: false,
        pageIndex: 1,
        pageSize: 5,
        totalPage: 0,
        addOrUpdateVisible:false,
      };
    },

    //计算属性类似于data概念
    computed: {},
    //监控data中的数据变化
    watch: {},
    //方法集合
    methods: {
      contextmenu(event,data,node,obj){
        this.menuOpen = true
        this.node = node
        this.data = data

      },
      getMenus() {
        this.$http({
          url: this.$http.adornUrl("/CarType/selAllType"),
          method: "get"
        }).then(({ data }) => {
          console.log("成功获取到菜单数据...", data.carTypeList);
          this.menus = data.carTypeList;
        });
      },
      update(){
        console.log(this.data)
        this.dialogType = "update";
        this.title = "修改分类";
        this.dialogVisible = true;
        this.category.carType = this.data.carType
        this.category.back = this.data.back
        this.category.id = this.data.id
      },
      append() {
        this.dialogType = "add";
        this.title = "添加分类";
        this.dialogVisible = true;
        this.category.parentId = this.data.id
      },
      submitData() {
        if (this.dialogType == "add") {
          this.addCategory();
        }else{
          this.updateCategory();
        }
      },
      //修改三级分类
      updateCategory(){
        console.log("提交的三级分类数据", this.category);
        this.$http({
          url: this.$http.adornUrl("/CarType/update"),
          method: "post",
          data: this.$http.adornData(this.category, false)
        }).then(({ data }) => {
          this.$message({
            message: "菜单修改成功",
            type: "success"
          });
          //关闭对话框
          this.dialogVisible = false;
          this.menuOpen = false
          //刷新出新的菜单
          this.getMenus();
        });
      },
      //添加三级分类
      addCategory() {
        console.log("提交的三级分类数据", this.category);
        this.$http({
          url: this.$http.adornUrl("/CarType/save"),
          method: "post",
          data: this.$http.adornData(this.category, false)
        }).then(({ data }) => {
          this.$message({
            message: "菜单保存成功",
            type: "success"
          });
          //关闭对话框
          this.dialogVisible = false;
          this.menuOpen = false
          //刷新出新的菜单
          this.getMenus();
        });
      },
      // 新增 / 修改
      addOrUpdateHandle (id) {
        this.addOrUpdateVisible = true
        this.$nextTick(() => {
          this.$refs.addOrUpdate.init(id)
        })
      },
      getCartypeList(){
        this.dataListLoading = true
        this.$http({
          url: this.$http.adornUrl('/carmanage/list'),
          method: 'get',
          params: this.$http.adornParams({
            'page': this.pageIndex,
            'limit': this.pageSize,
            'root': this.dataForm.root,
            'test':this.dataForm.test
          })
        }).then(({data}) => {
          if (data && data.code === 0) {
            this.dataList = data.page.list
            this.totalPage = data.page.totalCount
          } else {
            this.dataList = []
            this.totalPage = 0
          }
          this.dataListLoading = false
        })
      },
      deleteHandle(scop){
        var id = scop.id
        this.$confirm(`是否删除【${scop.carName}】车辆信息?`, "提示", {
          confirmButtonText: "确定",
          cancelButtonText: "取消",
          type: "warning"
        })
          .then(() => {
            this.$http({
              url: this.$http.adornUrl("/carmanage/delete"),
              method: "post",
              data:id
            }).then(({ data }) => {
              this.$message({
                message: "删除成功",
                type: "success"
              });
              //刷新
              this.getCartypeList();
            });
          })
      },
      getMenuCar(data,node,obj){
        this.dataForm.test = data.carType
        this.getCartypeList()
      },
      remove() {
        console.log("==================",this.data)
        var ids = this.data.id;
        this.$confirm(`是否删除【${this.data.carType}】菜单?`, "提示", {
          confirmButtonText: "确定",
          cancelButtonText: "取消",
          type: "warning"
        })
          .then(() => {
            this.$http({
              url: this.$http.adornUrl("/CarType/delete"),
              method: "post",
              data: ids
            }).then(({ data }) => {
              this.$message({
                message: "菜单删除成功",
                type: "success"
              });
              //刷新出新的菜单
              this.getMenus();
              this.menuOpen = false
            });
          })
          .catch(() => {});

        console.log("remove", node, data);
      },
      // 每页数
      sizeChangeHandle (val) {
        this.pageSize = val

        this.pageIndex = 1
        this.getCartypeList()
      },
      // 当前页
      currentChangeHandle (val) {
        this.pageIndex = val

        this.getCartypeList()
      },
    },
    //生命周期创建完成（可以访问当前this实例）
    created() {
      this.getMenus();
      this.getCartypeList();
    },
  };
</script>
<style>
</style>
